<template>
  <div style="width: 100%; height: 100%">
    <div v-if="credit">
      <!-- 顶头栏 -->
      <div class="upper">
        <div class="img">
          <button class="buttonimg" @click="buttonimgone" v-if="payment">
            <van-icon name="arrow-left" />
          </button>
          <img src="../../img/new-logo.png" alt="" class="logo" />
          <img src="../../img/makees.png" alt="" class="logo1" />
        </div>
      </div>
      <!-- 内容区 -->
      <div id="parent_div">
        <div id="child_div">
          <!-- 详细信息栏 -->
          <div
            class="information"
            v-for="data in orderList"
            :key="data.orderId"
          >
            <!-- 倒计时 -->
            <!-- {{ time ? time : "00:00s" }} -->
            <div class="timediv">
              <img src="../../img/time.png" alt="" class="countDown" />
              <span class="times"
                >Remaining payment time {{ time ? time : "00:00s" }}</span
              >
            </div>
            <!-- 虚线 -->
            <div class="linediv">
              <img src="../../img/Line.png" alt="" class="line" />
            </div>
            <!-- 对号 -->
            <div class="Orderdiv">
              <span class="Order">Order Summary</span>
            </div>
            <!-- 商品名 -->
            <div class="Productdiv">
              <span class="Product">Product Name:</span>&nbsp;
              <span class="ProductName" style="color: #000000; font-weight: 700"
                >{{ data.productName }}
              </span>
            </div>
            <!-- 单号 -->
            <div class="NOdiv">
              <span class="NO">NO:</span>
              <span class="orderId">{{ data.orderId }}</span>
            </div>
            <!-- 虚线 -->
            <div class="linediv">
              <img src="../../img/Line.png" alt="" class="line" />
            </div>
            <!-- 价钱 -->
            <div class="pricediv">
              <span class="price"
                >Price :<span style="color: #215dd4; font-weight: 700"
                  >&nbsp;{{ data.orderAmount | numFilter }}&nbsp;&nbsp;
                  {{ data.currency }}</span
                >
              </span>
            </div>
          </div>
        </div>
      </div>
      <!-- 填写信息 -->
      <div class="Fillinformation" v-show="Fillinformation">
        <div class="CreditCard">
          <img src="../../img/Vector.png" alt="" />
          <span>Credit Card</span>
        </div>
        <p class="Billing">Billing Address</p>
        <div class="Coutry">
          <p>*&nbsp;<span>Country</span></p>
          <!-- 输入框选中时自动放大的问题 -->
          <meta
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
            name="viewport"
          />
          <select name="" id="selects" v-model="nation" @change="change">
            <option selected hidden disabled value="" class="options">
              Please select
            </option>
            <option
              v-for="item in country"
              :key="item.en"
              :label="item.en"
              :value="item.en + item.zh + ',' + item.locale + ',' + item.code"
            >
              <span>{{ item.en }}</span>
            </option>
          </select>
        </div>
        <div class="Mobilenumber">
          <p>*&nbsp;<span>Mobile number</span></p>
          <input
            type="text"
            name=""
            id="mobile"
            placeholder="+35712345678"
            v-model="mobile"
            @click="numberclick"
          />
        </div>
        <div class="Address">
          <p>*&nbsp;<span>Address</span></p>
          <input
            type="text"
            name=""
            id="address"
            placeholder="Street123456"
            v-model="address"
          />
        </div>
        <div class="City">
          <p>*&nbsp;<span>City</span></p>
          <input
            type="text"
            name=""
            id="city"
            placeholder="Nicosia"
            v-model="city"
          />
        </div>
        <div class="Zip">
          <p>*&nbsp;<span>Zip/postal code</span></p>
          <input
            type="text"
            name=""
            id="zipCode"
            placeholder="Code number"
            v-model="zipCode"
          />
        </div>
        <div class="Email">
          <p>*&nbsp;<span>Email</span></p>
          <input
            type="text"
            name=""
            id="email"
            placeholder="testemail@example.com"
            v-model="email"
          />
        </div>
        <p style="padding: 0; margin: 0">&nbsp;</p>
        <p class="All">*All fields are required and must have correct format</p>
        <p class="All">
          *The Order is valid for <span style="color: red"> 15minutes</span>，if
          you exceed this time, the Order
          <span style="color: red">will be canceled.</span>
        </p>
        <button class="Previous" @click="buttonimg">Previous</button>
        <button class="Next" @click="Next">Next</button>
      </div>
      <!-- 支付 -->
      <div class="payment" v-show="payment">
        <div class="CreditCard">
          <img src="../../img/Vector.png" alt="" />
          <span>Credit Card</span>
        </div>
        <p class="Billing">Card Details</p>
        <div class="FirstName">
          <p>*&nbsp;<span>First Name</span></p>
          <input type="text" name="" placeholder="Joe" v-model="fistName" />
        </div>
        <div class="LastName">
          <p>*&nbsp;<span>Last Name</span></p>
          <input type="text" name="" placeholder="Doe" v-model="lastName" />
        </div>
        <div class="CardNumber">
          <p>*&nbsp;<span>Card Number</span></p>
          <input
            type="text"
            name=""
            placeholder="4141 4141 4141 4141"
            v-model="cardNumber"
          />
        </div>
        <div class="ExpDate">
          <p>*&nbsp;<span>Expiry Date</span></p>
          <input type="text" name="" placeholder="MM/YY" v-model="ExpDate" />
        </div>
        <div class="cvv">
          <p>*&nbsp;<span>CVV</span></p>
          <input
            type="password"
            name=""
            id=""
            placeholder="123"
            v-model="cvv"
          />
        </div>
        <p class="All">*All fields are required and must have correct format</p>
        <p class="All">
          *The Order is valid for <span style="color: red"> 15minutes</span>，if
          you exceed this time, the Order
          <span style="color: red">will be canceled.</span>
        </p>
        <button class="Previous" @click="buttonimgone">Previous</button>
        <button class="Next" @click="Next1" id="Nextid" v-if="button">
          Pay now
        </button>
        <button class="Next" v-if="icon">
          <img src="../../img/icon.gif" alt="" v-if="icon" />
        </button>
      </div>
    </div>
    <!-- 超时 -->
    <my-expired v-if="expired"></my-expired>
  </div>
</template>

<script>
import { Toast } from 'vant'
import { country } from '@/utils/country'
import { getPingAPI } from '@/api/query'
import 'vant/lib/index.css'
import { newDate } from '@/utils/means'
import axios from 'axios'
export default {
  name: 'linkPay',
  data () {
    return {
      country: [],
      card: '',
      button: true,
      icon: false,
      showCard: false,
      loading: true,
      orderList: [],
      countDown: null,
      newDate: new Date().getTime(),
      time: null,
      times: null,
      timer: null,
      show: true, // 加载遮罩层
      // 货币支付
      creditIsShow: null,
      cryptoIsShow: null,
      Fillinformation: true,
      payment: false,
      nation: '', // 国家
      mobile: '',
      email: '',
      address: '',
      city: '',
      zipCode: '',
      fistName: '',
      lastName: '',
      cardNumber: '',
      ExpDate: '',
      cvv: '',
      redirectURL: '',
      credit: true,
      expired: false// 超时
    }
  },
  created () {
    this.orderList = JSON.parse(localStorage.getItem('orderList')) // 从本地获取最新的orderList
    this.country = country
    this.goback()
  },
  mounted () {
    // 加载完成
    this.$nextTick(() => {
      const data = {
        orderId: this.$route.query.orderId,
        linkpaycompleted: 'linkpay-Loading-completed = ' + newDate()
      }
      getPingAPI(data)
    })
    // 退出
    window.onbeforeunload = () => {
      const data = {
        orderId: this.$route.query.orderId,
        linkpayclose: 'linkpay-close = ' + newDate()
      }
      getPingAPI(data)
    }
  },
  filters: {
    numFilter (value) {
      // 截取当前数据到小数点后六位
      const realVal = parseFloat(value).toFixed(6)
      return realVal
    }
  },
  updated () {
    this.cardNumber = this.cardNumber.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')
    this.ExpDate = this.ExpDate.replace(/\s/g, '').replace(/(\d{2})(?=\d)/g, '$1/')
  },
  methods: {
    // 支付接口
    buyWithCreditCard () {
      const data = {
        mobile: this.mobile,
        email: this.email,
        address: this.address,
        city: this.city,
        zipCode: this.zipCode,
        country: this.nation.split(',')[1],
        firstName: this.fistName,
        lastName: this.lastName,
        cardNumber: this.cardNumber,
        ExpDate: this.ExpDate,
        cvv: this.cvv,
        orderId: this.$route.query.orderId,
        sign: this.$route.query.sign
      }
      return axios({
        url: '/prod-api/api/v1/buyWithCreditCard',
        method: 'post',
        Headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: data
      })
    },
    // 回填信息接口
    getCustomerInfoByOrder () {
      const data = {
        orderId: this.$route.query.orderId,
        sign: this.$route.query.sign
      }
      return axios({
        url: '/prod-api/api/v1/getCustomerInfoByOrder',
        method: 'post',
        Headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        params: data
      })
    },
    goback () {
      // 获取后台时间戳
      this.countDown = this.orderList[0].expiresOn
      // 定时器方法
      this.countDowns()
      this.getCustomerInfoByOrder().then(res => {
        if (res.data.code === 0 && res.data.data.isExist === true) {
          this.mobile = res.data.data.mobile
          this.email = res.data.data.email
          this.address = res.data.data.addressLine
          this.city = res.data.data.city
          this.zipCode = res.data.data.zip
          document.getElementById('mobile').readOnly = 'readOnly'
          document.getElementById('email').readOnly = 'readOnly'
          document.getElementById('address').readOnly = 'readOnly'
          document.getElementById('city').readOnly = 'readOnly'
          document.getElementById('zipCode').readOnly = 'readOnly'
          document.querySelector('#selects').disabled = 'disabled'

          this.country.forEach(item => {
            if (item.locale === res.data.data.country) {
              this.nation = item.en + item.zh + ',' + item.locale + ',' + item.code
              document.querySelector('#selects').style.color = '#000'
              document.querySelector('#selects').style.fontWeight = 700
            }
          })
        }
        this.show = false
      })
    },
    // 定时器
    countDowns () {
      // 过期字符串减去当前系统字符串/1000转换成总秒数
      this.times = Math.floor((this.countDown - this.newDate) / 1000)
      // 通过定时器实现动态倒计时,每隔1秒更新一次
      this.timer = setInterval(() => {
        this.times -= 1
        this.getTime()
        if (this.times <= 0) clearInterval(this.timer)
      }, 1000)
      if (this.times <= 0) clearInterval(this.timer)
    },
    getTime () {
      let m = parseInt(this.times / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(this.times % 60)
      s = s < 10 ? '0' + s : s
      this.time = m + ':' + s + 's'
    },
    // 填写信息页返回按钮
    buttonimg () {
      const data = {
        orderId: this.$route.query.orderId,
        linkpayclickPreviousone: 'linkpay-click-Previousone = ' + newDate()
      }
      getPingAPI(data)
      this.$router.go(-1)
    },
    // 由卡信息到信息页返回按钮
    buttonimgone () {
      this.payment = false
      this.Fillinformation = true
      document.querySelector('#selects').style.color = '#000'
      document.querySelector('#selects').style.fontWeight = 700
      const data = {
        orderId: this.$route.query.orderId,
        information_cardinformation: 'linkpay-information-cardinformation = ' + newDate()
      }
      getPingAPI(data)
    },
    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    // 第一页里面的下一步
    Next () {
      if (this.mobile === '' || this.email === '' || this.address === '' || this.city === '' || this.zipCode === '' || this.nation === '') {
        if (this.mobile === '') {
          document.querySelector('.Mobilenumber input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Mobilenumber input').style.border = '0px'
        }
        if (this.email === '') {
          document.querySelector('.Email input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Email input').style.border = '0px'
        }
        if (this.address === '') {
          document.querySelector('.Address input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Address input').style.border = '0px'
        }
        if (this.city === '') {
          document.querySelector('.City input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.City input').style.border = '0px'
        }
        if (this.zipCode === '') {
          document.querySelector('.Zip input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Zip input').style.border = '0px'
        }
        if (this.nation === '') {
          document.querySelector('#selects').style.border = '0.01rem solid red'
          document.querySelector('#selects').style.color = 'red'
          const optionList = document.querySelectorAll('option')
          optionList.forEach(item => {
            item.style.color = '#000'
          })
        } else {
          document.querySelector('#selects').style.border = '0px'
          document.querySelector('#selects').style.color = '#000'
          const optionList = document.querySelectorAll('option')
          optionList.forEach(item => {
            item.style.color = '#000'
          })
        }
      } else {
        document.querySelector('.Mobilenumber input').style.border = '0px'
        document.querySelector('.Email input').style.border = '0px'
        document.querySelector('.Address input').style.border = '0px'
        document.querySelector('.City input').style.border = '0px'
        document.querySelector('.Zip input').style.border = '0px'
        document.querySelector('#selects').style.border = '0px'
        const data = {
          orderId: this.$route.query.orderId,
          linkpayclickNext: 'linkpay-click-Next = ' + newDate()
        }
        getPingAPI(data)
        this.Fillinformation = false
        this.payment = true
      }
    },
    change () {
      this.mobile = '+' + this.nation.split(',')[2]
      document.querySelector('#selects').style.color = '#000'
      document.querySelector('#selects').style.fontWeight = 700
    },
    // 支付按钮
    Next1 () {
      if (this.fistName === '' || this.lastName === '' || this.cardNumber === '' || this.ExpDate === '' || this.cvv === '') {
        if (this.fistName === '') {
          document.querySelector('.FirstName input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.FirstName input').style.border = '0px'
        }
        if (this.lastName === '') {
          document.querySelector('.LastName input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.LastName input').style.border = '0px'
        }
        if (this.cardNumber === '') {
          document.querySelector('.CardNumber input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.CardNumber input').style.border = '0px'
        }
        if (this.ExpDate === '' || this.ExpDate.length !== 5) {
          document.querySelector('.ExpDate input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.ExpDate input').style.border = '0px'
        }
        if (this.cvv === '') {
          document.querySelector('.cvv input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.cvv input').style.border = '0px'
        }
      } else {
        document.querySelector('.FirstName input').style.border = '0px'
        document.querySelector('.LastName input').style.border = '0px'
        document.querySelector('.CardNumber input').style.border = '0px'
        document.querySelector('.cvv input').style.border = '0px'
        if (this.ExpDate.length !== 5) {
          document.querySelector('.ExpDate input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.ExpDate input').style.border = '0px'
          this.button = false
          this.icon = true
          const data = {
            orderId: this.$route.query.orderId,
            linkpayclickPaynow: 'linkpay-click-Paynow = ' + newDate()
          }
          getPingAPI(data)
          this.buyWithCreditCard().then(res => {
            this.res = res
            this.pageData = res.data.data.pageData
            this.redirectURL = res.data.data.redirectURL
            this.msg = res.data.msg
            this.code = res.data.code
            if (this.code !== 0) {
              Toast.fail({
                message: this.msg,
                className: Toast
              })
              this.icon = false
              this.button = true
            } else {
              if (this.pageData) {
                this.iframe()
              }
              if (this.redirectURL) {
                location.href = this.redirectURL
              }
            }
          }).catch(res => {
            this.icon = false
            this.button = true
          }
          )
        }
      }
    },
    numberclick () {
      if (this.mobile === '') { this.mobile = '+' + this.mobile }
    },
    // link4pay页面后台获取
    iframe () {
      window.localStorage.removeItem('callbackHTML')
      // res.data 为后端返回的html字符串
      window.localStorage.setItem('callbackHTML', this.pageData)
      // 读取本地保存的html数据，在本页打开
      const newWin = window.open('', '_self')
      newWin.document.write(localStorage.getItem('callbackHTML'))
      // 关闭输出流
      newWin.document.close()
    }
  },
  watch: {
    times: {
      handler () {
        if (this.times <= 0) {
          const data = {
            orderId: this.$route.query.orderId,
            linkpayJumpexpired: 'linkpay-Jump-expired = ' + newDate()
          }
          getPingAPI(data)
          this.credit = false
          this.expired = true
        }
      }
    },
    mobile: {
      handler (val) {
        if (val === '') {
          document.querySelector('.Mobilenumber input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Mobilenumber input').style.border = '0px'
        }
      }
    },
    email: {
      handler (val) {
        if (val === '') {
          document.querySelector('.Email input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Email input').style.border = '0px'
        }
      }
    },
    address: {
      handler (val) {
        if (val === '') {
          document.querySelector('.Address input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Address input').style.border = '0px'
        }
      }
    },
    city: {
      handler (val) {
        if (val === '') {
          document.querySelector('.City input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.City input').style.border = '0px'
        }
      }
    },
    zipCode: {
      handler (val) {
        if (val === '') {
          document.querySelector('.Zip input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.Zip input').style.border = '0px'
        }
      }
    },
    nation: {
      handler (val) {
        if (val === '') {
          document.querySelector('#selects').style.border = '0.01rem solid red'
        } else {
          document.querySelector('#selects').style.border = '0px'
        }
      }
    },
    fistName: {
      handler (val) {
        if (val === '') {
          document.querySelector('.FirstName input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.FirstName input').style.border = '0px'
        }
      }
    },
    lastName: {
      handler (val) {
        if (val === '') {
          document.querySelector('.LastName input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.LastName input').style.border = '0px'
        }
      }
    },
    cardNumber: {
      handler (val) {
        if (val === '') {
          document.querySelector('.CardNumber input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.CardNumber input').style.border = '0px'
        }
      }
    },
    ExpDate: {
      handler (val) {
        if (val === '') {
          document.querySelector('.ExpDate input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.ExpDate input').style.border = '0px'
        }
      }
    },
    cvv: {
      handler (val) {
        if (val === '') {
          document.querySelector('.cvv input').style.border = '0.01rem solid red'
        } else {
          document.querySelector('.cvv input').style.border = '0px'
        }
      }
    }
  }
}

</script>

<style scoped lang="scss">
// 移动端
@media screen and (max-width: 700px) {
  #selects {
    border: none;
    outline: none;
    color: rgb(140, 139, 139);
    font-size: 0.3rem;
    option {
      color: #000;
    }
  }
  /* 信息栏 */
  // 加载遮罩层
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
  }
  .information {
    width: 95%;
    margin: 10px auto;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
  }
  .buttonimg {
    position: absolute;
    top: 0.2rem;
    width: 10%;
    font-size: 0.7rem;
    background-color: #215dd400;
    border: 0px solid #000;
    color: #fff;
  }
  .timediv {
    position: relative;
    height: 1.02564rem;
  }
  .linediv {
    position: relative;
    height: 0.5rem;
  }
  .Orderdiv {
    position: relative;
    height: 1rem;
  }
  .Productdiv {
    line-height: 14px;
    margin-left: 4%;
    margin-bottom: 10px;
  }
  .NOdiv {
    margin-left: 4%;
    padding-bottom: 4%;
  }
  .pricediv {
    position: relative;
    height: 1rem;
  }
  .price {
    position: absolute;
    left: 4%;
    float: right;
    font-size: 0.38026rem;
    color: #999999;
  }
  .Product {
    // position: absolute;
    display: block;
    font-size: 0.38026rem;
    color: #999999;
    float: left;
  }
  .NO {
    font-size: 0.39026rem;
    color: #999999;
  }
  .Order {
    position: absolute;
    left: 4%;
    font-size: 0.42026rem;
    font-weight: 700;
  }
  .upper {
    width: 100%;
    height: 1.15385rem;
    margin: 0 auto;
    background-color: #215dd4;
  }
  .logo {
    width: 20%;
    height: 0.64103rem;
    margin-top: 0.25641rem;
    margin-left: 38%;
  }
  .logo1 {
    display: none;
  }
  .img {
    padding-top: 1px;
  }
  .succeed {
    background-color: red;
    z-index: 99;
  }
  .ProductName {
    font-size: 0.36026rem;
    display: inline-block;
    word-break: break-all;
    // float: right;
    font-weight: 700;
    width: 50%;
    // margin: 0 auot;
    // word-wrap: break-word;
    // word-break: normal;
    // padding-left: 40%;
    vertical-align: top;
  }
  .orderId {
    font-size: 0.36026rem;
    padding-left: 2%;
    font-weight: 700;
  }
  .orderAmount {
    position: absolute;
    top: 3%;
    left: 13%;
    float: right;
    font-size: 0.36026rem;
    margin-left: 0.38462rem;
    color: #215dd4;
    font-weight: 700;
  }
  .countDown {
    position: absolute;
    top: 28.3%;
    left: 21%;
    width: 4%;
  }
  .times {
    color: #f2ae2b;
    font-size: 0.27462rem;
    position: absolute;
    top: 28%;
    left: 26%;
    font-weight: 700;
  }
  .line {
    width: 95%;
    position: absolute;
    left: 2%;
  }
  // 填写信息
  .Fillinformation {
    width: 95%;
    margin: 10px auto;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
  }
  .CreditCard {
    padding: 0.2rem 0.4rem 0 0.4rem;
    img {
      width: 6%;
    }
    span {
      margin-left: 0.2rem;
      font-size: 0.37rem;
      font-weight: 700;
    }
  }
  .Billing {
    margin-left: 0.4rem;
    font-size: 0.37rem;
    color: #666666;
    font-weight: 700;
  }
  .Mobilenumber {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 92%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .Email {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 92%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .Address {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 92%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .City {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    width: 50%;
    float: left;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 75%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .Zip {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 40%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .Coutry {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    font-weight: 700;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    select {
      width: 96.7%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
      user-select: none;
    }
    select:hover {
      border: 1px solid #215dd4;
    }
  }
  .FirstName {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 92%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .LastName {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 92%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .CardNumber {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 92%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .ExpDate {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    width: 50%;
    float: left;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 75%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .cvv {
    margin-left: 0.3rem;
    font-size: 0.37rem;
    p {
      font-weight: 700;
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 40%;
      height: 0.7rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.4rem;
      border-radius: 0.2rem;
    }
    input:hover {
      border: 1px solid #215dd4;
    }
  }
  .All {
    color: #8a8f99;
    font-size: 12px;
    margin-left: 0.4rem;
    margin-top: 00.2rem;
  }
  .Previous {
    display: none;
  }
  .Next {
    width: 90%;
    margin: 0.5rem 5%;
    background-color: #215dd4;
    border: 0px;
    height: 1rem;
    color: #fff;
    font-size: 0.4rem;
    border-radius: 0.3rem;
    img {
      width: 10%;
      vertical-align: middle;
    }
  }
  .payment {
    width: 95%;
    margin: 10px auto;
    border-radius: 15px;
    box-shadow: 2px 2px 2px #f5f5f5, -2px -2px 2px #f5f5f5;
  }
}
// PC端
@media screen and (min-width: 700px) {
  input::-webkit-input-placeholder {
    /*WebKit browsers*/
    color: #cccccc;
    font-weight: 400;
  }
  input::-moz-input-placeholder {
    /*Mozilla Firefox*/
    color: #cccccc;
    font-weight: 400;
  }
  input::-ms-input-placeholder {
    /*Internet Explorer*/
    color: #cccccc;
    font-weight: 400;
  }
  #selects {
    border: none;
    outline: none;
    color: #cccccc;
    font-size: 0.1rem;
    option {
      color: #000;
    }
  }
  // 加载遮罩层
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background-color: #ffffff;
  }
  /* 信息栏 */
  .information {
    width: 80%;
    position: relative;
    box-shadow: 0 0.02856rem 0.08128rem #e9e5e5;
    border-radius: 0.12821rem;
    margin: 0.12821rem auto;
  }
  .buttonimg {
    display: none;
  }
  .timediv {
    position: relative;
    height: 0.33333rem;
    float: right;
    width: 50%;
  }
  .linediv {
    display: none;
  }
  .Orderdiv {
    position: relative;
    height: 0.25rem;
  }
  .Productdiv {
    margin-left: 2%;
    margin-top: 2%;
    padding-bottom: 1%;
  }
  .NOdiv {
    margin-left: 2%;
    padding-bottom: 2%;
  }
  .pricediv {
    position: relative;
    height: 0.28rem;
    float: right;
    width: 50%;
  }
  .price {
    position: absolute;
    right: 5%;
    top: -100%;
    float: right;
    font-size: 0.11821rem;
    color: #999999;
  }
  .Product {
    position: absolute;
    display: inline-block;
    font-size: 0.11821rem;
    color: #999999;
  }
  .NO {
    font-size: 0.11821rem;
    color: #999999;
  }
  .Order {
    position: absolute;
    left: 2%;
    top: 34%;
    font-size: 0.13rem;
    font-weight: 700;
  }
  .upper {
    width: 100%;
    height: 0.32rem;
    margin: 0 auto;
    background-color: #215dd4;
  }
  .logo {
    height: 0.19rem;
    width: 6.5%;
    margin-left: 10%;
    margin-top: 0.075rem;
  }
  .logo1 {
    height: 0.15rem;
    width: 13%;
    margin-left: 0.5%;
    margin-bottom: 0.025rem;
  }
  .button {
    width: 4%;
    position: absolute;
    top: 5%;
    left: 5%;
  }
  .ProductName {
    font-size: 0.10821rem;
    display: inline-block;
    width: 60%;
    font-weight: 700;
    word-wrap: break-word;
    word-break: normal;
    padding-left: 12%;
    vertical-align: top;
  }
  .orderId {
    font-size: 0.10821rem;
    font-weight: 700;
    padding-left: 2%;
  }
  .orderAmount {
    position: absolute;
    left: 4%;
    top: -97%;
    float: right;
    font-size: 0.10821rem;
    margin-left: 0.38462rem;
    color: #215dd4;
    font-weight: 700;
  }
  .countDown {
    position: absolute;
    top: 30%;
    right: 43%;
    width: 3%;
  }
  .times {
    color: #f2ae2b;
    font-size: 0.09821rem;
    position: absolute;
    top: 33%;
    right: 3%;
    font-weight: 700;
  }
  // 虚线
  .line {
    width: 95%;
    position: absolute;
    left: 2%;
    display: none;
  }
  .Fillinformation {
    width: 80%;
    position: relative;
    box-shadow: 0 0.02856rem 0.08128rem #e9e5e5;
    border-radius: 0.12821rem;
    margin: 0.12821rem auto;
  }
  .CreditCard {
    padding: 0.07rem 0.15rem 0 0.15rem;
    img {
      width: 2.8%;
    }
    span {
      margin-left: 0.1rem;
      font-size: 0.12rem;
      font-weight: 700;
    }
  }
  .Billing {
    margin-left: 0.15rem;
    font-size: 0.12rem;
    color: #666666;
    font-weight: 700;
  }
  .Coutry {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    width: 46.5%;
    float: left;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    select {
      width: 95%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .Mobilenumber {
    // margin-left: 0.1rem;
    padding-top: 0.01rem;
    font-size: 0.1rem;
    font-weight: 700;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 47%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .Address {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 95.3%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .City {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    width: 32%;
    float: left;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 80%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .Zip {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    float: left;
    width: 32%;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 80%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .Email {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    width: 30%;
    float: left;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 86%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .FirstName {
    margin-left: 0.15rem;
    margin-top: -0.1rem;
    font-size: 0.1rem;
    font-weight: 700;
    width: 50%;
    float: left;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 85%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .LastName {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 45%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .CardNumber {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 96%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .ExpDate {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    width: 50%;
    float: left;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 85%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .cvv {
    margin-left: 0.15rem;
    font-size: 0.1rem;
    font-weight: 700;
    p {
      color: #fe6868;
      span {
        color: #333333;
      }
    }
    input {
      width: 45%;
      height: 0.3rem;
      background-color: #f5f6fb;
      border: 0px;
      padding-left: 0.15rem;
      border-radius: 0.1rem;
    }
    input:focus {
      border: 0.01rem solid #215dd4 !important;
    }
  }
  .All {
    color: #8a8f99;
    font-size: 0.09rem;
    margin-left: 0.15rem;
    margin-top: 0.1rem;
  }
  .Next {
    // position: relative;
    width: 20%;
    margin: 0.13rem 22.5% 0.1rem 5%;
    background-color: #215dd4;
    border: 0px;
    height: 0.3rem;
    color: #fff;
    font-size: 0.12rem;
    border-radius: 0.1rem;
    img {
      width: 14%;
      vertical-align: middle;
    }
  }
  .Previous {
    width: 20%;
    margin: 0.13rem 5% 0.1rem 22.5%;
    background-color: #215dd4;
    border: 0px;
    height: 0.3rem;
    color: #fff;
    font-size: 0.12rem;
    border-radius: 0.1rem;
  }
  .payment {
    width: 80%;
    position: relative;
    box-shadow: 0 0.02856rem 0.08128rem #e9e5e5;
    border-radius: 0.12821rem;
    margin: 0.12821rem auto;
  }
}
</style>
